{% extends "main.html" %}

{% block "main-content" %}

<style>
    #main-content{
        background-image: url(/static/img/qmarks.png)
    }
</style>

<div class="d-flex flex-column justify-content-center align-items-center" style="height: calc(100vh - 250px);">
    <h1 style="font-size: 150pt; font-weight: bold">404</h1>
    <h3 class="pb-4">Oops... that page doesn't exist!</h3>
    <button class="btn btn-primary text-light rounded-pill" onclick="window.location.href='/';">
        <svg class="pe-2" xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-house-door-fill" viewBox="0 2 16 16">
            <path d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5z"/>
        </svg>
        Return Home
    </button>
</div>

{% endblock %}